<template>
	<view class="au-voice" v-if="src" @tap="onPlay">
	  <view class="au-bg"  :class="{'au-voicePlay' :isPlay}" >1
		<view class="au-ms">
			<text v-if="time!=0">{{time}}″</text>
		</view>
	  </view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();//播放
	export default {
		props:{
			src :{
				type :[String],
				default: ''
			},
			time :{
				type :[Number],
				default :0
			}
		},
		created() {
			
		},
		data() {
			return {
				isPlay :false	//正在播放
			};
		},
		methods:{
			onPlay :function(e){
				if(this.isPlay){
					this.isPlay =false;
					innerAudioContext.stop();
				}else{
					innerAudioContext.src = this.src;
					console.log("this.src:",this.src);
					console.log("innerAudioContext.src:",innerAudioContext.src);
					innerAudioContext.play(); 
					this.isPlay = true;
					innerAudioContext.onEnded(() => {
						this.isPlay =false;
					})
				}
			},
		}
	}
</script>

<style>
 .au-voice{ 
      padding-top: 5px;
      padding-left: 10px;
      height: 30px;
      width: 120px;
      background: #3BA56F;
	  border-radius: 7px 7px 7px;
	  position: relative;
	  display: inline-block;
	  cursor: pointer;
	}
	
    .au-bg {
      background:url() right 0 no-repeat;
        width: 17px;
        height: 17px;
	  background-size: 350%;
	  color: transparent;
	  margin-top: 2px;
	  background-position: 100%;
	  
    }
     
    .au-voicePlay {
      animation-name: voicePlay;
      animation-duration: 1s;
      animation-direction: normal;
      animation-iteration-count: infinite;
	  animation-timing-function: steps(3);
	  
	}
	
	.au-ms { position: absolute; right: 10px; color: #fff; top:0; font-size: 12px;}
     
    @keyframes voicePlay {
      0% {
        background-position: 0;
      }
      100% {
        background-position: 100%;
      }
    }
</style>
